<template>
    <div :style="myStyle">
        <div class=" isblock">
            <div class="isleft" v-show="zlist.length != numshow">
                <el-upload class="avatar-uploader"
                    :style="{ width: upWith + 'px', height: upHeight + 'px', borderRadius: upBradius + 'px', lineHeight: upHeight + 'px' }"
                    action="/api/upload/carouse" :headers="headers" :data="updataimg"
                    accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                    :on-progress="topprogressicon">
                    <div v-show="isopens">
                        <i class="el-icon-loading"></i>
                        上传中...
                    </div>
                    <div v-show="!isopens">
                        <i class="el-icon-plus avatar-uploader-icon-sf">{{ uptext }}</i>
                        <div class="avatar-uploader-icon-sf">（{{ zlist.length }}/{{ numshow }}）</div>
                    </div>
                </el-upload>
            </div>
            <draggable v-model="zlist" class="dira" item-key="id">
                <template #item="{ element, index }">
                    <div class=" isblocks">
                        <div class="ress">
                            <el-image ref="preview"
                                :style="{ width: upWith + 'px', height: upHeight + 'px', borderRadius: upBradius + 'px' }"
                                :preview-src-list="zlist" :src="element"></el-image>
                        </div>
                        <div class="imgs_prews">
                            <div class="imgs_prew"
                                :style="{ width: upWith + 'px', height: upHeight + 'px', borderRadius: upBradius + 'px' }">
                                <!-- <div class="show" @click="ylimg(index)">
                                    预览
                                </div>
                                <span></span> -->
                                <div class="show" @click="deleteimg(index)">
                                    删除
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </draggable>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
    components: {
        draggable
    },
    props: {
        //上传最大值
        numshow: {
            type: String,
            default: '9'
        },
        //改变文字
        uptext: {
            type: String,
            default: '上传图片'
        },
        //宽度
        upWith: {
            type: Number,
            default: 100
        },
        //高度
        upHeight: {
            type: Number,
            default: 100
        },
        //圆角
        upBradius: {
            type: Number,
            default: 0
        },
        //1图片 2视频
        utype: {
            type: Number,
            default: 1
        },
        //回显数组
        imglist: {
            type: Array,
            default: []
        },
        //可忽略
        isflag: {
            type: Boolean,
            default: false
        }
    },
    //修改宽高圆角
    computed: {
        myStyle() {
            return {
                "--upWith": this.upWith + 'px',
                "--upHeight": this.upHeight + 'px',
                "--upBradius": this.upBradius + 'px'
            }
        }
    },
    data() {
        return {
            updatehttp: '/wdd/carouse/list', //上传的接口
            headers: {
                token: localStorage.getItem('logintoken')
            },
            updataimg: {
                folder: 'file' //上传时携带参数
            },
            isopens: false,//上传加载显示
            isok: false, //上传成功失败,
            payVoucherDialog: false,
            ishow: true,
            zlist: [] //组件数组
        }
    },
    watch: {
        //动态监听组件变化，把新数组传给父组件
        zlist(newvalue) {
            this.$emit('changeName', this.zlist)
        }
    },
    created() {
        //回显数组
        this.zlist = this.imglist
    },
    methods: {
        //上传成功
        handleAvatarSuccess(res, file) {
            console.log(res, '图片上传')
            // this.form.user.imagePath = re.response.path;
            this.zlist.push(res.data[0].url)
            console.log(this.zlist, '上传成功')
            this.isopens = false
        },
        //文件上传时
        topprogressicon(event, file, fileList) {
            if (this.isok) {
                //上传时显示 加载提示
                this.isopens = true
            }
        },
        //上传之前的操作
        beforeAvatarUpload(file) {
            //对上传图片做验证
            if (file.type.includes('image')) {
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                    this.isok = false
                } else {
                    this.isok = true
                }
            }
        },
        //删除
        deleteimg(index) {
            console.log(index, '删除')
            // this.$delete(this.zlist, index)
            this.zlist.splice(index, 1)
            // delete this.zlist[index]
        },
        //预览
        ylimg(index) {
            // this.$refs.preview[index].showViewer = true
            this.$nextTick(() => {
                // this.$refs.imageView.showViewer = true

                this.$refs.imageView.clickHandler();//主要代码 触发图片预览功能
            })
        },
    },
}
</script>

<style scoped>
/* 修改upload的原有样式 */
.avatar-uploader /deep/ .el-upload {
    width: var(--upWith);
    height: var(--upHeight);
    border-radius: var(--upBradius);
    line-height: 40px;
}

.avatar-uploader-icon-sf {
    color: #999999;
}

.ress {
    position: relative;
}

.avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 100%;
    text-align: center;
}

.isblock {
    display: inline-block;
    width: 700px;
}

.isleft {
    float: left;
    margin-right: 10px;
}

.isblocks {
    margin-right: 10px;
    display: inline-block;
}

.isblock .isblocks:hover .imgs_prews {
    display: block;
}

.imgs_prews {
    display: none;
}

.imgs_prew {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

/* 左右图标 */
.imgs_prew i {
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
}

.imgs_prew span {
    width: 2px;
    height: 18px;
    margin: 0px 20px;
    background-color: #fff;
}

.show {
    cursor: pointer;
}
</style>